width 與 height 這兩個屬性說是必學可是完全名符其實，每個頁面中一定都會使用到這兩個屬性，width 與 height 主要分別是設定頁面中物件的寬與高，尤其新手更是容易把這兩個屬性用壞掉，對的！你沒看錯，就是把它用錯，導致畫面壞掉。width 與 height 這兩個屬性是 CSS 中最簡單卻也是最基本的屬性，width 與 height 的值基本上只需要一個就好，但也有特殊狀況會用到多個的，先來看看基本的原始碼設定長怎樣
width: 100%;
height: 300px;
從以上寫法就能看出可以使用百分比與像素來設定物件的寬與高，width 與 height 的值，可以使用的單位不少，先來看看有哪些
在這些單位中，其實也能再細分成「相對單位」與「絕對單位」，「相對單位」與「絕對單位」的基本觀念其實與「Font-size - 金魚都能懂的CSS必學屬性」裡面提到的差不多，有興趣了解的朋友可以直接至該篇文章看，這邊就不複述。此外由於 width 與 height 的設定問題差不多，所以本篇將會直接以 width 為主作介紹。
在 width 要特別提到的設定就是 100% 與 100vw 的差異了，許多新手在學習階段，或多或少都會到網路上面參考許多不同的教學或者是心得文，然後看了一些範例照抄或臨摹，接著出問題(笑)！在這邊特別提到的 100% 與 100vw 就是一個新手經常誤會的地方，讓我們來了解一下
當我們對一個物件設定 width: 100%; 的時候，基本上該物件寬度將會等於是父層內容的可運用空間，而甚麼是內容可運用空間？其實就是 padding 以內的空間，一個物件的寬度大小，基本上可以說是「 width 、 padding 、 border 、 margin 」四個屬性的組成，而至今尚未介紹過 padding 這個屬性，就請各位先暫時先寫入大腦記憶體先，後面會再作介紹。
當我們對一個物件設定 width: 100vw; 的時候，該物件的大小將會等於是百分之百的「視窗」寬度，但比較正確的解釋應該是「視口範圍」寬度或「可見範圍」寬度，也就是 vw 中的 v 所指的「viewport」，這裡特別注意到的重點會是，視窗寬度中是不包含卷軸在內的，也就是說 100vw 會等於是視窗的左邊緣到右邊緣，那麼當你的視窗出現卷軸時會怎麼樣呢？這時你的寬度就會因為卷軸的關係，導致寬度過寬，而讓你的畫面出現了橫向卷軸。但 width: 100% 卻不會有這問題，因為它的寬度是父層的可用空間，而非視窗的寬度。這一個小差異，還請各位特別再三注意。
也因為 width: 100vw 很容易造成視窗出現橫向卷軸的問題，所以一般我們在開發網頁時多會使用 width: 100% 而非 width:100vw，那甚麼時候會用到 width: 100vw 呢？就目前來說 Amos 還沒遇到必須使用的時機，所以就看各位有沒有機會遇到了，歡迎分享給 Amos。
多數新手在使用 width 與 height 的時候，為何經常會有問題呢？普遍的狀況都是物件的尺寸計算出了問題所致，在網頁中每個物件都會佔據一些空間，所以對於新手來說，計算錯誤是最常見的問題了， Amos 常會遇到新手畫面出現問題了，然後丟了句「我的畫面不知道為什麼壞掉了？」給我， Amos 一看...經常都是子物件寬度使用了絕對尺寸去設定，並且還設定的比父層寬度還要寬的狀況，這樣不壞掉也難啊(攤)。而至於網頁中物件尺寸的計算方式，可以參考「金魚都能懂網頁設計入門 : 區塊尺寸計算 」以及「金魚都能懂網頁設計入門 : 換個新盒子」中，會有詳細的說明。
width 與 height 雖然說是寬高的設定，但也還是有一些執行條件的，用比較簡單的說法是，基本上你的物件必須是 inline 物件以外的特性，像是 block 、 inline-block 、 flex item 、 list-item，又或者是表格、儲存格這類屬性，所以簡言之就是 inline 類型的物件是不支援 width 與 height 的，請新手們在設定時千萬要注意。
一個簡單的屬性，卻是眾多新手錯誤的開始，看似輕鬆完成，卻又錯誤不斷，幾個小小的重點就請金魚們小心且注意了，金魚都能懂的 CSS 必學屬性，我們下篇見！
「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
使用100vh可視最大化時,出現那捲軸
我發覺可以用calc(100vh-20px) 扣掉多出來的
<style>
body{
margin:0px;
}
</style>
</head>
<body >
<!-- 參考:https://www.runoob.com/try/try.php?filename=trycss_grid3 -->
<div class="grid grid-cols:5 p:10px gap:10px bg:#2196F3
h:calc(100vh-20px)
">
<div class="div1 grid-col-span:5">頭部</div>
<div class="div1 grid-row-span:2">菜單</div>
<div class="div1 grid-col-span:3">內容</div>
<div class="div1">右側</div>
<div class="div1 grid-col-span:4">底部</div>
</div>
</body>
iThome鐵人賽
看影片追技術